import React from 'react'
import { TreeSelect } from 'antd';

export default class Demo extends React.Component {
  state = {
    value: undefined,
    treeData: [
      { id: 1, pId: 0, value: '1', title: 'Expand to load' },
      { id: 2, pId: 0, value: '2', title: 'Expand to load' },
      { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true }, 
      //todo isLeaf 是否是叶子节点 如果是的话，就不会继续加载，默认false
      //pId很重要,具体见treeDataSimpleMode
    ],
  };


  shouldComponentUpdate(nextProps, nextState) {
    console.log(this.state, "this.state")
    return true
  }

  genTreeNode = (parentId, isLeaf = false) => {
    const random = Math.random()
      .toString(36)
      .substring(2, 6);
    return {
      id: random,
      pId: parentId,
      value: random,
      title: isLeaf ? 'Tree Node' : 'Expand to load',
      isLeaf,
    };
  };

  onLoadData = treeNode =>
    new Promise(resolve => {
      const { id } = treeNode.props;
      setTimeout(() => {
        this.setState({
          treeData: this.state.treeData.concat([
            this.genTreeNode(id, false),
            this.genTreeNode(id, true),
          ]),
        });
        resolve()
      }, 300);
    });


  render() {
    return (
      <TreeSelect
        treeDataSimpleMode
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 600, overflow: 'auto' }}
        placeholder="Please select"
        multiple
        treeDefaultExpandAll
        loadData={this.onLoadData}
        treeData={this.state.treeData}
        onChange={(value) => this.setState({ value })}
      />
    );
  }
}